<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>画星星</title>
</head>
<body>
星星点灯
<br />
save()  保存图像  restore() 恢复现场 <br />
位移：translate(x,y)  旋转： rotate(deg)   缩放：scale(sx,sy)<br />
<canvas id="canvas" style="border:1px solid #aaa; display:block; margin:10px auto;">
	当前浏览器不支持canvas, 请更换浏览器后再试
</canvas>
<script>

	window.onload = function(){
	
		var canvas = document.getElementById("canvas");
		
		canvas.width = 900;
		canvas.height = 700;
		
		var context = canvas.getContext("2d");
		
		context.fillStyle = "black";//设置背景颜色
		context.fillRect( 0, 0, canvas.width, canvas.height);
	
			for( var i = 0; i < 200; i++){
				//为了使这两百个星星状态有些差异
				//所以大小，位置， 角度应该有些不同
				var r = Math.random() * 10 + 10;
				var x = Math.random() * canvas.width;
				var y = Math.random() * canvas.height;
				var a = Math.random() * 360;
			drawStar(context, x, y, r, r/2.0, a);
			}
		

	}
	
	/**
	 * @Method
	 * @Param
	 */
	
	function drawStar( cxt, x, y, R, rot){
		cxt.save(); //保存图形
		
		cxt.translate( x, y);
		cxt.rotate( rot /180 * Math.PI);
		cxt.scale( R, R);//注意scale在放大过程会产生副作用，如边框大小，位置等 倍数增长
		
		starPath(cxt);
		
		cxt.fillStyle = "#fb3";
		//cxt.strokeStyle = "#fd5";
		//cxt.lineWidth = 3;
		//cxt.lineJoin = "round";
		
		cxt.fill();
		//cxt.stroke();
		
		cxt.restore(); //恢复图形
		
	}

	
	
	 
	
	/**
	 * @Method  画标准五角星 starPath
	 * @param   上下绘图环境 cxt
	 */
	function starPath(cxt){
			cxt.beginPath();
			for( var i = 0; i < 5; i++){
				cxt.lineTo(Math.cos( (18 + i*72)/180 * Math.PI),
								-Math.sin( (18 + i*72)/180 * Math.PI)) ;
				cxt.lineTo(Math.cos( (54 + i*72)/180 * Math.PI) * 0.5,
								-Math.sin( (54 + i*72)/180 * Math.PI) * 0.5) ;
			}
			
			cxt.closePath();
	}
	
</script>
</body>
</html>
